/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-tag {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--pure-tag-gap, 5px);
    border-radius: var(--pure-tag-border-radius, 4px);
    position: relative;
    padding: var(--pure-tag-padding, 0 0.75em);
    font-size: var(--pure-tag-font-size, 0.8em);
    color: var(--pure-tag-color);
    height: var(--pure-tag-height, 2em);
    overflow: hidden;
    border: var(--pure-tag-border-width, 0) var(--pure-tag-border-style, solid) var(--pure-tag-border-color, currentColor);
    line-height: 1;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        background: var(--pure-tag-background, var(--pure-background-light));
    }

    &__icon,
    &__text,
    &__close {
        position: relative;
        z-index: 1;
    }

    &__icon,
    &__close {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    &--close {
        animation: pure-tag-close 0.25s linear 0s 1 forwards;
    }

    &--theme {
        color: var(--pure-tag-color, #ffffff);

        &::before {
            background: var(--pure-tag-background, var(--pure-tag-theme-value));
        }
    }

    &--ghost {
        color: var(--pure-tag-color, var(--pure-tag-theme-value));
        border-color: var(--pure-tag-border-color, var(--pure-tag-theme-value, currentColor));
        border-width: var(--pure-tag-border-width, 1px);

        &::before {
            opacity: var(--pure-tag-background-opacity, 0.2);
        }
    }

    &--plain {
        color: var(--pure-tag-color, var(--pure-tag-theme-value));
        border-color: var(--pure-tag-border-color, var(--pure-tag-theme-value, currentColor));
        border-width: var(--pure-tag-border-width, 1px);

        &::before {
            opacity: var(--pure-tag-background-opacity, 0);
        }
    }

    &--round {
        border-radius: var(--pure-tag-border-radius, 1000px);
    }
}

@keyframes pure-tag-close {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
        opacity: 0;
        display: none;
    }
}
